//axios全局设置请求拦截器
axios.interceptors.request.use(
    (config) => {   //这个回调函数 在每次发请求到服务器之前都会调用执行
        //设置请求头参数
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

//axios全局设置响应拦截器
axios.interceptors.response.use(
    (res) => {   //这个回调函数 在每次发请求从服务器返回到浏览器之前 都会调用执行
        return res
    },
    (error) => {      //每次请求发生错误，都会调用执行
        if (error.response.status == 401) {
            alert('登录过期，请重新登录！')
            location.href = './login.html'
            localStorage.removeItem('token')
        } else if (error.response.status == 404) {
            alert('访问路径有误')
        } else if (error.response.status == 500) {
            alert('服务器内部错误')
        }
    }
)

//获取搜索按钮
var searchBtn = document.querySelector('.searchbox .search')
//获取输入框
var inputEle = document.querySelector('.searchbox  input')

//获取localstorage本地存储的用户信息
var userinfo = JSON.parse(localStorage.getItem('userinfo'))
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name


//点击搜索按钮发起ajax请求，传参给服务器，服务器端返回搜索的结果
searchBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
}

//给table-body绑定点击事件（事件委托）
var tablebody = document.querySelector('.table-body')
tablebody.onclick = (e) => {
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        //发起删除请求，删除服务端的用户
        console.log(e.target.dataset.phone);
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            console.log(res.data);
            // e.target.parentNode.parentNode.remove()
            render(res.data.list)
        })
    }
}

//渲染列表
function render(data) {
    var str = ''
    str = data.map((item, index) => {
        return `<ul class="row">
                    <li>${item.email}</li>
                    <li>${item.name}</li>
                    <li>${item.phone}</li>
                    <li>${item.ingroup}</li>
                    <li>${item.isadmin ? '是' : '否'}</li>
                    <li class="${item.status ? '' : 'error'}">${item.status ? '正常' : '异常'}</li>
                    <li>
                    <span class="iconfont icon-bianji editicon" id="101"></span>
                    <span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span>
                    </li>
                </ul>`
    }).join('')
    if (str == '') {
        str = `<ul style="text-align:center;color:red">未查询到数据！</ul>`
    }
    document.querySelector('.table .table-body').innerHTML = str
}


axios.get('/user/list', { params: { page: 1, count: 2 } }).then((res) => {
    //调用render方法,传入后端返回的数据，渲染列表
    render(res.data.list)
    console.log(res.data);
})

axios.post('/user/login', { phone: '15682710163', pass: '1234' }).then((res) => {
    console.log(res.data);
})

